<template>
  <div class="kanban-main-warp animated" style="display: block;" v-loading.body="loading">
    <div class="kanban-main-container content">
      <div class="kanbanCard-main-container">
        <div class="cardList-container-warp">
          <ul class="cardList-container ui-sortable">
            <draggable id="projectTagTmpList" class="dragArea" :options="{animation: 300,}" @end="tagColumnDragEnd()" style="display: inline-block;height: 100%;">

              <li class="kanban-card-container list-monday animated" v-for="(item1,index) in projectList" :tagKey="item1.tag" :key="item1.id"
                :tagVal="item1.tagVal">
                <div class="kanban-card-container">
                  <div class="kanban-card-warp">
                    <div class="card-table">
                      <div class="head-tr">
                        <div class="header" style="display: block;">
                          <div class="attr" @dblclick="jumpToOneTask({type:'projectTask',title:item1.title,list:item1.list,key:item1.tag,val:item1.tagVal,projectId:pid})">
                            <span>{{ item1.title }}</span>
                          </div>
                        </div>
                        <div class="card-rename" style="display:none;">
                          <input type="text" v-model="addCardItemTitle" placeholder="标题">
                          <span class="btn btn-primary save pull-right" v-loading="addCardItemLoading" @click="addTaskWithDueKV(item1.tag,item1.tagVal,{pid:pid},true)">保存</span>
                          <div style="clear: both"></div>
                        </div>
                        <i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i>
                      </div>
                      <div class="body-tr">
                        <div class="body-tr-container">
                          <div class="kanban-item-warp">
                            <ul class="kanban-item-list">
                              <div class="itemTop"></div>
                              <div class="kanbanItem-add" style="display: none;">
                                <textarea placeholder="任务标题"></textarea>
                                <input type="checkbox" name="">
                                <ul style="height:6px"></ul>
                                <span class="btn btn-primary save">创建</span>
                                <span class="btn btn-secondary cancel">取消</span>
                                <div style="clear: both"></div>
                              </div>
                              <ul class="list-ul doing ui-sortable allow-detail-click" style="min-height: 100px;width: 100%">
                                <draggable class="dragArea today-task-list" :list="item1.list" :tagKey="item1.tag" :tagVal="item1.tagVal" :options="{group:'task'}"
                                  @add="dragAdd" @start="dragStart()" @end="dragEnd()">
                                  <li v-on="{ mouseenter: trueActive, mouseleave: falseActive }" class="kanban-Item-container animated tooltipstered" :class="[item2['tags']&&item2['tags']['need']?'has-need':'',taskStatusClass(item2.state),...checkLevel(item2.tags)]"
                                    v-for="(item2,index2) in item1.list" :taskId="item2.id" :id="item2.id" :key="item2.id"
                                    tabindex="1" draggable="false" @keyup.ctrl.up="up(index2,projectList[index].list)" @keyup.ctrl.down="down(index2,projectList[index].list)"
                                    @dblclick="showDetail(item2.id)">
                                    <!--v-if="item2.tags[item1] != undefined"-->

                                    <el-popover placement="right" width="500" trigger="hover" ref="popover{{index2}}" v-model="item2.visible" :open-delay='500'
                                      @show="loadPic(index2,item2)">
                                      <div style="text-align: center; margin:0" v-if="item2.visible">
                                        <div v-html="templateData"></div>
                                      </div>
                                      <div slot="reference">
                                        <div class="left">
                                          <el-checkbox @change="changeTaskStatusBox(item2)" v-model="item2.finished"></el-checkbox>
                                        </div>
                                        <div class="right">
                                          <div v-if="item2.uid" class="portrait-container">
                                            <img class="portrait" :src="setTaskMemberImg(item2)">
                                          </div>
                                          <div class="row1">
                                            <span class="kanban-item-title">{{(index2+1)+'.'+item2.title}}</span>
                                            <div v-if="!item2.uid" @click.stop="doGetTask(item2)" class="receive-btn">领取</div>
                                            <div v-if="item2.uid&&item2.uid==uid" @click.stop="doGiveupTask(item2)" class="receive-btn">放弃</div>
                                          </div>
                                          <div class="dateNode node"></div>
                                        </div>
                                      </div>
                                    </el-popover>
                                  </li>
                                </draggable>
                              </ul>
                            </ul>
                          </div>
                          <div class="no-task-container" v-show="item1.list.length==0">
                            <img src="../../../static/z39pc/assets/images/no-task.png" alt="" />
                            <p>点击创建新任务</p>
                            <p>或使用+号创建新任务</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="footer">
                      <!--项目4种模式点击-->
                      <div class="three-type-contaienr" v-if="index==0">
                        <span @click="changeMode(1)" :class="showMode==1?'active':''">1</span>
                        <span @click="changeMode(2)" :class="showMode==2?'active':''">2</span>
                        <span @click="changeMode(3)" :class="showMode==3?'active':''">3</span>

                      </div>
                      <div class="bottom" style="display:block">
                        任务{{item1.finishNum}}/{{item1.list.length}}
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </draggable>
          </ul>
          <div class="addCard" style=" height: 100%;width: 80px;" v-show="showMode!=2" @click="showTmpDialog(tagTmpDev)">
            <ul class="addCard-ul" style="position:relative;top: 50%;margin-top: -35px;">
              <li><i class="icon-add_circle addItem"></i></li>
              <li><span>新建</span></li>
            </ul>
          </div>

          <ul class="cardList-container ui-sortable" v-if="this.showMode==1">

            <li class="kanban-card-container list-monday animated">
              <div class="kanban-card-container">
                <div class="kanban-card-warp">
                  <div class="card-table">
                    <div class="head-tr">
                      <div class="header" style="display: block;">
                        <div class="attr">
                          <span>需求和建议</span>
                        </div>
                      </div>
                    </div>
                    <div class="body-tr">
                      <div class="body-tr-container">
                        <div class="kanban-item-warp">
                          <ul class="kanban-item-list">
                            <div class="itemTop"></div>
                            <ul class="list-ul doing ui-sortable allow-detail-click" style="min-height: 100px;width: 100%">
                              <draggable class="dragArea today-task-list" :list="item_need.list" :tagKey="item_need.tag" :tagVal="item_need.tagVal" :options="{group:'task'}"
                                @add="dragAdd">
                                <li class="kanban-Item-container animated tooltipstered" :key="item2['id']" :class="[item2['tags']&&item2['tags']['need']?'has-need':'',taskStatusClass(item2.state)]"
                                  v-for="(item2,index2) in item_need.list" :taskId="item2.id" draggable="false" @dblclick="showDetail(item2.id)">
                                  <!--v-if="item2.tags[item1] != undefined"-->
                                  <div class="left">
                                    <el-checkbox @change="changeTaskStatusBox(item2)" v-model="item2.finished"></el-checkbox>
                                  </div>
                                  <div class="right">
                                    <div class="portrait-container">
                                      <img class="portrait" :src="setTaskMemberImg(item2)">
                                    </div>
                                    <div class="row1">
                                      <span v-bind:title="item2.title+'\n'+item2.desc" class="kanban-item-title">{{(index2+1)+'.'+item2.title}}</span>
                                      <div class="receive-btn" style="display: none;">领取</div>
                                    </div>
                                    <div class="dateNode node"></div>
                                  </div>
                                </li>
                              </draggable>
                            </ul>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="footer">
                    <div class="bottom" style="display:block">
                      任务{{item_need.finishNum}}/{{item_need.list.length}}
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="kanban-main-container" id="taskeditor" style="position:absolute" @keydown.esc="escEditor()" tabindex="1">
    </div>
    <div class="task-detail-container" tabindex="1" @keydown.esc="escTaskDetail()">
      <task-detail ref="taskDetailComponent"></task-detail>
    </div>
    <tmp-dialog ref="tmpDialog"></tmp-dialog>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import _ from "underscore";
  import moment from "moment";
  import taskDetail from '../../components/task/taskDetail.vue'
  import tmpDialog from '../../components/task/tmpDialog.vue'
  import api from '../../api';
  import {
    taskAndTag
  } from "../../common/mixin";
  import {
    mixinPc
  } from "../../common/mixinPc";
  import {
    mixinEditor
  } from "../../common/mixinEditor";
  import {
    bus
  } from "../../common/bus";
  import {
    mapState,
    mapActions
  } from 'vuex';
  export default {
    components: {
      'task-detail': taskDetail,
      'tmp-dialog': tmpDialog,
      draggable
    },
    data() {
      return {
        templateData: '',
        loading: false,
        showPopover: false,
        monthsList: [],
        searchDaysStr: '', //时间相同，则不重复请求数据
        pid: '',
        projectList: [],

        item_need: {
          tags: ['demand', 'suggest'],
          status: ['done', 'doing', 'ok'],
          list: [],
          tag: 'demand',
          tagVal: 'doing',
          finishNum: 0
        },
        //memberActive: false,
        showMode: 1,
        tagTmpDev: '',
        projectMemberList: [],
        projectMemberObj: {},
        showDateRange: []
      };
    },
    mixins: [taskAndTag, mixinPc, mixinEditor],
    computed: {
      ...mapState({
        uid: state => state.vux.uid,
        minDate: state => state.z39.minDate,
        maxDate: state => state.z39.maxDate,
        showMonth: state => state.z39.showMonth,
        taskAll: state => state.z39.taskAll,
        tagDic: state => state.z39.tagDic,
        taskDic: state => state.z39.taskDic,
        tagitems: state => state.z39.tagitems,
        tagitemDic: state => state.z39.tagitemDic,
        days: state => state.z39.days,
        projects: state => state.z39.projects,
        members: state => state.z39.members,
        todayTags: state => state.z39.tagtmps,
        memberDic: state => state.z39.memberDic,
        daySelect: state => state.z39.selectedDayDate,
        showYear: state => state.z39.showYear,
        filterTaskState: state => state.z39.filterTaskState,
      }),

    },
    watch: {
      //直接通过url访问会有可能出现卡片title为空问题，通过以下方法更新projectList
      'tagitemDic': function () {
        this.projectList.forEach(project => {
          if (project['title'] !== undefined && project['title'] !== 'undefined(部门)') return;

          if (this.tagitemDic[project['tag']] !== undefined) {
            if (project['title'] === 'undefined(部门)') {
              project['title'] = this.tagitemDic[project['tag']] + '(部门)';
            } else {
              project['title'] = this.tagitemDic[project['tag']];
            }

          }
        });
      },
      "taskAll": {
        handler() {
          this.$parent.nones;
          this.getList(this.pid, this.showMode);
        },
        deep: true,
      },
      'showYear': function () {
        this.getList(this.pid, this.showMode);
      },
      'tagTmpDev': {
        handler() {
          this.getList(this.pid, this.showMode);
        },
        deep: true,
      },
      'todayTags': {
        handler() {
          console.log(this.pid)
          this.getTagTmpDev(this.pid, this.showMode);
        },
        deep: true,
      },
      filterTaskState: function () {

        this.getList(this.pid);
      },
      pid: function () {
        if (this.pid) {
          this.getProjectMemberList();
        }
      }
    },
    methods: {
      dragStart:function(){
        $("body").addClass('draging');
      },
      dragEnd:function(){

        $("body").removeClass('draging');
      },
      daterangeChange(currentDate) {
        if (!this.getIsChangeDate(currentDate)) {
          return false;
        }

        this.getList(this.pid, this.showMode);
      },
      loadPic: function (index, desc) {
        desc.visible = true;
        // let reg = new RegExp('http', "g")
        // console.log(desc)
        // .replace(reg, 'https')
        this.templateData = desc.title + desc.desc;

      },
      getTagTmpDev: function (pid, mode) {

        var _this = this;
        var tagTmpSystem = '';
        //				this.tagTmpDev = '';
        this.todayTags.forEach(function (item) {
          if (item.key == 'dev') {
            tagTmpSystem = item;
          }
        })
        api.tagTmpGet({
          pid: pid
        }).then(data => {
          this.tagTmpDev = data.data
          if (!this.tagTmpDev) {
            this.tagTmpDev = tagTmpSystem;
          }
          this.getList(pid, mode);
        })

        //获取项目的模板
      },
      showDetail: function (taskId) {
        //由于会引起闪屏，所以关掉
        //$('.task-detail-container').focus()
        this.$refs.taskDetailComponent.showTaskDetail(taskId)
      },
      getIsChangeDate(dateRange) {
        if (dateRange == undefined) {
          return false;
        }
        if (this.showDateRange == undefined) {
          return true;
        }
        let [begin, end] = dateRange;
        let [now_begin, now_end] = this.showDateRange;
        return !(moment(begin).format('YYYY-MM-DD') == moment(now_begin).format('YYYY-MM-DD') && moment(end).format(
          'YYYY-MM-DD') == moment(now_end).format('YYYY-MM-DD'));
      },
      getList: function (pid, mode) {
        console.log('project-getList', pid, mode)
        mode = mode || this.showMode;
        var _this = this;
        if (this.showMode != mode) this.setModeLocal(mode);
        var proId = pid || null;
        var query = this.$route.query;

        let dateRange = this.$parent.showDateRange;
        if (pid && (pid != this.pid || this.getIsChangeDate(dateRange))) {
          this.showDateRange = dateRange;

          let stime = dateRange[0] ? moment(dateRange[0]).format('YYYY-MM-DD') : '';
          let etime = dateRange[1] ? moment(dateRange[1]).format('YYYY-MM-DD') : '';

          var sdata = {
            pid: proId,
            stime: stime,
            etime: etime,
            //usesocket:true
          };
          if (mode == 3) {
            sdata.key = query.part || "dev";
            delete sdata.usesocket;
          }
          if (query.state != undefined) sdata.state = query.state || "";
          // sdata.key= "dev"; // 测试用

          this.$store.commit({type: "z39/resetById",ids: ['taskAll', 'tagDic', 'taskDic'],});
          this.usertask();
          this.tasksGet(sdata);
        } else {
          console.error("jump out", pid, this.pid);
        }
        if (pid != null) this.pid = pid || null; //
        if (mode == 1) {
          this.getPartList(proId);
        } else if (mode == 2) {
          this.getMemberList(proId)
        } else if (mode == 3) {
          this.getModuleList(proId, this.$route.query.part);
        } else {
          this.getModuleList(proId);
        }
      },
      getPartList(pid) {
        //this.projectPart=this.tagTmpDev.tmp.split(','); //注意这一行
        var temps = (this.tagTmpDev.tmp && this.tagTmpDev.tmp.split(',')) || [];
        var showList = temps.map(item => {
          return {
            title: this.tagitemDic[item],
            tag: item,
            tagVal: ""
          }
        });
        this.showProjectList(showList);
      },
      getMemberList: function (pid) {
        console.log("getmemberlist")
        if (!pid) return;
        var proId = pid || null;
        let _this = this;
        var sdata = {
          id: pid,
          member: 1
        };
        api.projectGet(sdata).then(data => {
          if (data && data.errno == 0) {
            data = data.data;
            var members = data.members;
            var showList = members.map(i => {
              return {
                title: i.nname || i.username,
                tag: 'to',
                tagVal: i.fuid
              }
            });
            this.showProjectList(showList);
          } else { //发生错误.
            _this.$message.error(data.errmsg);
          }
        })
      },
      getModuleList: async function (pid, part) {
        if (!pid) return;
        // part = part || "" ;
        part = part || "dev"; //默认开发部门.
        var sdata = {
          id: pid,
          member: 1
        };

        let moduleStr = await api.projectGet({
          id: pid,
          modules: 1
        }).then(data => {
          if (data && data.errno == 0) {
            return data['data']['moduletmp'];
          } else { //发生错误.
            this.$message.error(data.errmsg);
          }
        })
        //var moduleStr = '1.任务,2.总结,3.开放接口,4.教程,5.需求建议,6.档案库,7.博客,8.市场,9.论坛,10.快捷键,11.群组,12.咨询,13.h5,14.ai客服,15.领域,16.兼职客服,17.App,18官网' ;
        var modules = moduleStr.split(',') || [];
        var showList = modules.map(item => {
          return {
            title: item,
            tag: "module",
            tagVal: item
          }
        });
        this.showProjectList(showList, part);
      },
      showProjectList(showList, part) {
        var taskList = this.taskAll.filter(task => {
          if (this.filterTaskState == '' || this.filterTaskState == 0) {
            return task.parid == null && task.pid == this.pid
          } else if (this.filterTaskState == 1) {
            return task.parid == null && task.pid == this.pid && task.state != 'done' && task.state !=
              'cancelled'
          } else if (this.filterTaskState == 2) {
            return task.parid == null && task.pid == this.pid && task.state == 'done'
          }
        });
        var pList = [];
        var tagList = showList;
        tagList.forEach(item => {
          pList.push({
            title: item.title,
            tag: item.tag,
            tagVal: item.tagVal,
            list: []
          })
        });
        pList = Object.assign([], pList);
        if (this.showMode == 2) {
          pList.unshift({
            title: '未分配',
            tag: 'noMember',
            tagVal: '',
            list: []
          })
        }
        pList.forEach((item, index, arr) => {
          if (this.showMode == 3) {
            arr[index].list = taskList.filter(task => {
              return task.tags && task.tags["module"] && task.tags["module"] == item.tagVal
            });
          } else if (this.showMode == 2) {
            if (item.tag != 'noMember') {
              arr[index].list = taskList.filter(task => {
                return task.tags && (task.uid == item.tagVal || task.tags['to'] == item.tagVal)
              })
            } else {
              arr[index].list = taskList.filter(task => {
                return task.tags && !task.uid && !task.tags['to']
              })
            }
          } else {
            arr[index].list = taskList.filter(task => {
              return task.tags && task.tags[item.tag] != undefined
            });
          }
          arr[index].finishNum = arr[index].list.filter(item2 => {
            return item2.state == 'done';
          }).length;
        })
        if (this.showMode == 1) {
          var unClassifiedItem = {
            title: '未分类',
            tag: 'unClassified',
            tagVal: '',
            list: []
          };
          unClassifiedItem.list = taskList.filter(task => {
            var hasTag = tagList.some(item => {
              return task.tags[item.tag] != undefined
            })
            if (!hasTag) return task;
          })
          //从未分类内筛选出需求和建议
          this.item_need.list = unClassifiedItem.list.filter(task => {
            var hasTag = this.item_need.status.some(item => {
              let tag = '';
              for (let i = 0; i < this.item_need.tags.length; i++) {
                if (task['tags'][this.item_need.tags[i]] != undefined) {
                  tag = task['tags'][this.item_need.tags[i]];
                }
              }
              return tag == item;
            });
            if (hasTag) return task;
          });
          this.item_need.finishNum = this.item_need.list.filter(item2 => {
            return item2.state == 'done';
          }).length;

          unClassifiedItem.list = unClassifiedItem.list.filter(task => {
            var hasTag = this.item_need.list.some(item => {
              return item === task;
            })
            return !hasTag;
          });



          unClassifiedItem.finishNum = unClassifiedItem.list.filter(item2 => {
            return item2.state == 'done';
          }).length;
          pList.push(unClassifiedItem)
        }
        if (part && this.showMode == 3) { //模式3,显示部门的模块待办任务
          var partItem = {
            tag: part,
            tagVal: '',
            title: this.tagitemDic[part] + "(部门)",
            list: []
          };
          partItem.list = taskList.filter(task => {
            return task.tags && task.tags[part] != undefined
          });
          partItem.finishNum = partItem.list.filter(item2 => {
            return item2.state == 'done';
          }).length;
          pList.unshift(partItem);
        }
        this.projectList = pList;
        //这里调用缓存project数据
        this.projectList=this.resortTmps(this.projectList)
      },
      tagColumnDragEnd: function () {
        var that = this;
        //拖动project下的面板时的end事件
       //console.log("tagcol");
       //console.log(this.projectList)
        //这段代码直接return了，return以下的不起作用了。直接在这里改动。为了不因此引起其他bug，这里还是就用jquery 获取变动后的数据。
        //官方文档有简单方法获取变动后的数据。
        //return;
        var tagArr = [];
        //获取变动后的key与val
        $('#projectTagTmpList>li').each(function () {
          var obj ={tagVal:$(this).attr('tagval'),tag:$(this).attr('tagKey')}
          var tag = undefined;
          for(var i in that.projectList) {
            if(that.projectList[i].tagVal == obj.tagVal && that.projectList[i].tag == obj.tag) {
              tag = that.projectList[i];
              break;
            }
          }
           if(!(_.isUndefined(tag)))
             tagArr.push(tag)
        })
       //console.log(tagArr)
       //console.log(this.pid)
        var projectTagTmps = JSON.parse(localStorage.getItem('projectTagTmps') );
        if(!$.isArray(projectTagTmps)){
          projectTagTmps = [];
        }
       //console.log(projectTagTmps)
        var projectTagTmp = {}
        projectTagTmp.uid = this.uid;
        projectTagTmp.pid = this.pid;
        projectTagTmp.showMode = this.showMode;
        projectTagTmp.projectList = tagArr;
        //查找是否存在了。存在了就更新
        var isExflag = 0;
        for (var i in projectTagTmps){
          if(projectTagTmps[i].uid == this.uid && projectTagTmps[i].pid == this.pid
            && this.showMode == projectTagTmps[i].showMode){
            isExflag = 1;
           //console.log(isExflag)
            projectTagTmps[i]=$.extend(true,{},projectTagTmp);
            break;
          }
        }
        if(isExflag == 0)
        projectTagTmps.push(projectTagTmp)
       //console.log(isExflag)
        if (this.pid) {
         //console.log(JSON.stringify(projectTagTmps))
          localStorage.projectTagTmps = JSON.stringify(projectTagTmps)

         //console.log(projectTagTmps)
         //console.log(localStorage.projectTagTmps)
        }
      },
      resortTmps: function (arr) {
        //使用本地缓存的标签模板顺序
        var projectTagTmps = JSON.parse(localStorage.getItem('projectTagTmps') );
           //判断是否为该uid下的
          var resortArr = [];
          var isUpdateFlag =0;
          for (var  i in projectTagTmps) {
            if (projectTagTmps[i].showMode == this.showMode && projectTagTmps[i].uid == this.uid && projectTagTmps[i].pid == this.pid) {
              var projectList = projectTagTmps[i].projectList;
              for (var m in projectList) {
                for (var j in arr) {
                  if (arr[j].tagVal == projectList[m].tagVal && arr[j].tag == projectList[m].tag) {
                    resortArr.push(arr[j])
                  }
                }
              }
              isUpdateFlag = 1;
              break;
            }

          }
          if(isUpdateFlag == 1){
           //console.log(resortArr)
            return resortArr;
          }else{
           //console.log(arr)
            return arr;
          }
      },
      getProjectMemberList: function () {
        api.getProjectFriends({
          gid: this.pid
        }).then(data => {
          if (data && data.errno == 0) {
            data = data.data;
            this.projectMemberList = data;
            var len = data.length;
            for (var i = 0; i <= len - 1; i++) {
              var item = data[i];
              this.projectMemberObj[item.fuid] = item;
            }
          }
        })
      },
      setTaskMemberImg: function (task) {
        var uid = task.uid;
        var user = this.projectMemberObj[uid];
        if (!user || !this.pid) return "";
        return user.headimgurl;

        var fuid = '';
        var memberImg = 'http://cdns.7dtime.com/z39/images/default.jpg'
        if (task.tags && task.tags['to']) {
          fuid = task.tags['to']
        }
        if (fuid) {
          this.projectMemberList.forEach(item => {
            if (item.fuid == fuid) {
              memberImg = item.headimgurl;
            }
          })
        }
				return memberImg
			},
			changeMode(type){
				this.getList(this.pid,type);
				//this.$emit('changeTodayShowType', type)
			},
			setModeLocal(type){
				localStorage.setItem('showModeProject',type);
				this.showMode = type;
			},
			doGetTask(task){
				this.taskSet({uid:this.uid,id:task.id}, task);
			},
			doGiveupTask(task){
				this.taskSet({uid:"",id:task.id}, task);
			},
      trueActive: function (e) {
        var btn = e.target.getElementsByClassName('receive-btn');
        if (!btn || btn.length < 1) return;
        btn[0].style.display = 'block'
        btn[0].style.right = '0'
      },
      falseActive: function (e) {
        var btn = e.target.getElementsByClassName('receive-btn');
        if (!btn || btn.length < 1) return;
        btn[0].style.display = 'none'
        btn[0].style.right = '-75px'
      }
    },
    created() {},
    mounted() {
      this.showMode = parseInt(localStorage.getItem('showModeProject') || 1);
      var pid = this.$route.params.pid;
    //   this.getList(this.pid, this.showMode);
      var mode = this.$route.query.mode || 0;
      if (!pid && this.$parent.projectId) pid = this.$parent.projectId;
      if (pid) this.getList(pid, parseInt(mode));
      this.getTagTmpDev();

      bus.$on('toShowTaskDetail', id => {
        console.log("sdfsd")
        this.showDetail(id)
      })

    }
  }
</script>

<style>
  @media screen and (max-height: 1280px) {
    #taskeditor {
      display: none;
      width: calc(100% - 380px) !important;
      margin-right: 5px;
      height: 104% !important;
    }
  }

  @media screen and (max-height: 800px) {
    #taskeditor {
      display: none;
      height: 108% !important;
      margin-top: -22px;
      width: calc(100% - 310px) !important;
      margin-right: 1px;
    }
  }

body.draging > div.el-popover{
  display: none !important;
}
  /* #taskeditor {
		display: none;
		width: calc(100% - 300px)!important;
	} */


  .task-main-container li .critical {
    border: 1px solid #1ba4ff;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px #1ba4ff inset*/
  }
  .task-main-container li .high {
    border: 1px solid #72c7ff;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px #72c7ff inset*/
  }
  .task-main-container li .low {
    border: 1px solid #f7c3c3;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px #FF6666 inset*/
  }
  .task-main-container li .minor {
    border: 1px solid red;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px red inset*/
  }
  .task-main-container li .life {
    border: 1px solid orange;
    border-radius: 5px;
    /*box-shadow: 0px 0px 10px 3px orange inset*/
  }
</style>
